<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background: pink;

            border-top-color: red;
            border-width: 10px;
            border-top-style: solid;
            border-top-style: dotted;
            border-top-style: dashed;
            border-top-style: double;

            border-bottom: 10px solid blue;
        }


        #box2{
            width: 200px;
            height: 200px;
            background: orange;

            /* border-style: solid;
            border-color: green;
            border-width: 10px;
            border: 5px dashed pink; */

            border-style: solid;
            border-color: green;
            border-width: 10px;
            border: solid;
        }

        #box3{
            width: 0px;
            height: 0px;
            border-top: 10px solid blue;
            border-left: 10px solid red;
            border-right: 10px solid green;
            border-bottom: 10px solid orange;


            border-top: 10px solid transparent;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid orange;
        }


        button{
            width: 200px;
            height: 50px;
            background: lightgreen;
            border: none;
            color: white;
            font-size: 30px;
            /* border-radius: 10px; */
            border-top-left-radius: 100px;
            border-bottom-left-radius: 100px;

            border-radius: 100px;
            border-radius: 100%;
        }


        #box4{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            border-radius: 100%;

            background: url('./resource/1.jpg') 0px 0px/100% 100%;
        }

        table{
            border-collapse: collapse;
        }


        button{
            outline: none;
        }

        input{
            width: 300px;
            height: 30px;
            border: 5px solid black;
            outline: none;
        }

        input:focus{
            border-color: skyblue;
            /* outline: 5px solid red; */
        }

    </style>
</head>
<body>
    <!--  
        1. 边框基本属性
            方向: top bottom left right
            属性: color 默认值 
                  width 默认值
                  style 默认值: none 隐藏
                                solid 实线 (常用)
                                double 双线
                                dotted 点线
                                dashed 虚线
                                ...

        2. 边框
            单边
                border-方向-属性
                border-方向: [color] | [width] | style

            四边
                border-属性: 
                border: [color] | [width] | style
        
            注意: 在所有简写中, 先详写, 后简写 (简写的默认会覆盖前面的详写)

        3. 圆角
            单个圆角
            border-上下-左右-radius: px 或 %

            四个圆角
            border-radius: px 或 %

            注意: 
                px 按小边进行弧度
                %  按大边进行弧度

        4. 表格合并
            border-collapse: collapse;

        5. 轮廓
            outline : none  隐藏

            outline 其实与border 一模一样
    -->

    <div id="box"></div>
    <br>
    <br>
    <br>
    <div id="box2"></div>
    <br>
    <br>
    <br>
    <div id="box3"></div>
    <br>
    <br>

    <button>登录</button>
    <br>
    <br>

    <div id="box4"></div>
    <br>
    <br>
    <br>


    <table border="1" cellspacing="0">
        <caption>中国美食</caption>
        <tr>
            <td>黄焖鸡</td>
            <td>白斩鸡</td>
            <td>三杯鸡</td>
        </tr>
        <tr>
            <td>鱼汤面</td>
            <td>阳春面</td>
            <td>长寿面</td>
        </tr>
        <tr>
            <td>辣子鸡</td>
            <td>大盘鸡</td>
            <td>口水鸡</td>
        </tr>
    </table>
    <br>
    <br>
    <br>

    <input type="text">








</body>
</html>